$hdbgcol:#323136;
$fzcol:#fff;
$fsz:50;
$search:#666;
$wrap:750rem/$fsz;
$contentcol:#999;
$criclecol:#2e343d;
@import 'base';
@mixin tac($value:0){text-align: center;margin:0 auto; font-size:$value;} 
@mixin psitac{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
@mixin radiu{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
body,html{width: 100%;height: 100%;} 
    .header{
        width:$wrap;
        background-color:$hdbgcol;
        color:$fzcol;
        line-height:80rem/$fsz;   
        @include tac(36rem/$fsz);
    }

section{
     width:$wrap;position:relative;
     @include tac;
    line-height: 0;margin-top: 30rem/$fsz;
   .search{
    a{color:$search;}
    cursor:pointer;
    margin-top: 30rem/$fsz;
    @include tac(30rem/$fsz);
    i{
        margin-right:6rem/$fsz;
        img{width: 30rem/$fsz;height: 30rem/$fsz;}
        }
    }
    #app{
        padding:0 20rem/$fsz;
        box-sizing:border-box;
        margin-top: 28rem/$fsz;
        .info{
            position:relative;
            margin-right:25rem/$fsz;
            &:nth-of-type(3n){
                margin-right:0;
            }
            float: left;margin-bottom:20rem/$fsz;
            .shadow{
                 width: 220rem/$fsz;height: 390rem/$fsz;
                background-color: rgb(255, 255, 255);
                -webkit-box-shadow: 0px 8px 26px 0px rgba(212, 212, 212, 0.196);
            }
         // 优惠
        .newclas{
            position:absolute;left:10rem/$fsz;bottom:42rem/$fsz;
            img{width:32rem/$fsz;height:36rem/$fsz}
        }
        .showimg{
            height: 330rem/$fsz;background:url(../img/loading.gif) center center no-repeat;position:relative;
            img{
                width: 220rem/$fsz;height: 330rem/$fsz;
            }
        .cricle{width: 24rem/$fsz;height: 24rem/$fsz;border: 1px solid $criclecol; @include radiu;position:absolute;right:10rem/$fsz;top:10rem/$fsz;cursor:pointer;}
        .current{width: 16rem/$fsz;height: 16rem/$fsz;background-color: $criclecol;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%); @include radiu;}
        .numbel{background-color: rgb(255, 255, 255);position: absolute;left: 10rem/$fsz;top: 10rem/$fsz;
                width:70rem/$fsz;height:30rem/$fsz;z-index:16;border-radius:25rem/$fsz;text-align: center;color:#333;font-size:12rem/$fsz;line-height: 30rem/$fsz}
        }
        .showp{height: 60rem/$fsz;font-size: 22rem/$fsz;color:$contentcol;background-color:#fff;line-height: 60rem/$fsz}
        }
    }
//单独class的存放
.ftshadow{img{width: 44rem/$fsz;height: 42rem/$fsz;}}
.delete{img{width: 36rem/$fsz;}left:25rem/$fsz;}
.posishow{right:25rem/$fsz;}
.closeimg{width: 30rem/$fsz;height: 30rem/$fsz;}
.displ{display:none;}
}

//window
.windbg{
    width: 100%;height: 100%; background-color:rgba(pink,0%);z-index:100;position:fixed;top:0;left:0;
    .wind{
    width: 350rem/$fsz;height: 200rem/$fsz;background-color: #fff;border-radius:4%;border: 1px solid #ddd;
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    font-size:24rem/$fsz;color:#6f6f6f;
    p{position:absolute;}
    .p1{margin:50rem/$fsz 0 0 70rem/$fsz;}
    .p2{bottom:20rem/$fsz;right:140rem/$fsz;color:#aaa;cursor:pointer;}
    .p3{bottom:20rem/$fsz;right:20rem/$fsz;color:#26d351;cursor:pointer;}
    }
}

.shouwind{display:none;}
// 标题浮动
 #titl{position:fixed;left:0;top:0;;transition:all .5s;width: 100%;height:60rem/$fsz;line-height: 60rem/$fsz;background-color: #fff;z-index: 12;}
